import api from '../../services/api'

Page({
  data: {
    // 车辆照片
    carImageUrl: '',
    carImageFile: null,
    
    // 色卡数据
    colorList: [],
    selectedColorId: '',
    selectedColorName: '',
    selectedColor: null,  // 添加完整的选中色卡信息
    colorPageNo: 1,
    hasMoreColors: true,  // 确保此字段存在
    loadingColors: false, // 确保此字段存在
    
    // 渲染状态
    renderLoading: false,
    renderResult: null,
    
    // 计算属性
    canPreview: false,
    showColorModal: false  // 添加弹窗显示状态
  },

  onLoad(options) {
    // 页面加载时初始化数据
    this.loadColorList()  // 恢复API调用
    // 注释掉测试数据
    // this.generateTestData()
  },

  onShow() {
    // 页面显示时不需要检查登录状态，因为已在入口处检查
    // 可以在此处刷新数据或处理其他逻辑
  },

  /**
   * 选择车辆照片
   */
  chooseCarImage() {
    const that = this
    wx.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: ['album', 'camera'],
      maxDuration: 30,
      camera: 'back',
      success(res) {
        const tempFilePath = res.tempFiles[0].tempFilePath
        that.setData({
          carImageUrl: tempFilePath,
          carImageFile: tempFilePath,
          renderResult: null // 清除之前的渲染结果
        })
        that.checkCanPreview()
        
        // 显示上传成功提示
        wx.showToast({
          title: '照片选择成功',
          icon: 'success',
          duration: 1500
        })
      },
      fail(err) {
        console.error('选择图片失败:', err)
        wx.showToast({
          title: '选择图片失败',
          icon: 'error',
          duration: 2000
        })
      }
    })
  },

  /**
   * 加载色卡列表
   */
  async loadColorList() {
    if (this.data.loadingColors || !this.data.hasMoreColors) {
      console.log('loadColorList 被阻止:', {
        loadingColors: this.data.loadingColors,
        hasMoreColors: this.data.hasMoreColors
      });
      return;
    }
    
    console.log('开始加载色卡列表，页码:', this.data.colorPageNo);
    this.setData({ loadingColors: true })
    
    try {
      const params = {
        pageNo: this.data.colorPageNo
      }
      
      console.log('API请求参数:', params);
      const res = await api.colorChange.getColorList(params)
      console.log('API响应:', res);
      
      if (res.status === 200) {
        // 处理不同的API响应结构
        let newColors = [];
        let hasMoreColors = false;
        
        if (Array.isArray(res.data)) {
          // 如果res.data直接是数组
          newColors = res.data;
          hasMoreColors = newColors.length >= 10; // 假设每页至少10条
        } else if (res.data && Array.isArray(res.data.list)) {
          // 如果res.data.list是数组（分页结构）
          newColors = res.data.list;
          hasMoreColors = res.data.hasNext || (newColors.length >= (res.data.pageSize || 10));
        } else if (res.data && Array.isArray(res.data.records)) {
          // 如果res.data.records是数组（另一种分页结构）
          newColors = res.data.records;
          hasMoreColors = res.data.hasNext || (newColors.length >= (res.data.size || 10));
        } else {
          newColors = res.data || [];
          hasMoreColors = newColors.length >= 10;
        }
        
        console.log('解析后的数据:', {
          newColorsLength: newColors.length,
          hasMoreColors: hasMoreColors,
          响应结构: res.data
        });
        
        const allColors = this.data.colorPageNo === 1 ? newColors : [...this.data.colorList, ...newColors];
        
        console.log('更新数据:', {
          allColorsLength: allColors.length,
          newColorsLength: newColors.length,
          hasMoreColors: hasMoreColors,
          nextPageNo: this.data.colorPageNo + 1
        });
        
        this.setData({
          colorList: allColors,
          hasMoreColors: hasMoreColors,
          colorPageNo: this.data.colorPageNo + 1
        })
      } else {
        throw new Error(res.message || '获取色卡列表失败')
      }
    } catch (error) {
      console.error('加载色卡列表失败:', error)
      wx.showToast({
        title: '加载色卡失败',
        icon: 'error',
        duration: 2000
      })
    } finally {
      this.setData({ loadingColors: false })
      console.log('loadColorList 完成，最终状态:', {
        colorListLength: this.data.colorList.length,
        hasMoreColors: this.data.hasMoreColors,
        loadingColors: this.data.loadingColors
      });
    }
  },

  /**
   * 加载更多色卡（滚动触底时调用）
   */
  loadMoreColors() {
    console.log('🚀 触发加载更多色卡', {
      loadingColors: this.data.loadingColors,
      hasMoreColors: this.data.hasMoreColors,
      currentPage: this.data.colorPageNo,
      colorListLength: this.data.colorList.length
    });
    
    // 直接调用加载色卡列表方法（取消测试模式）
    this.loadColorList();
  },

  /**
   * 选择颜色
   */
  selectColor(e) {
    const { id, name, color, picture, sku } = e.currentTarget.dataset
    const selectedColor = {
      id: id,
      name: name,
      color: color,
      colorPicture: picture,
      sku: sku
    }
    
    this.setData({
      selectedColorId: id,
      selectedColorName: name,
      selectedColor: selectedColor,
      renderResult: null // 清除之前的渲染结果
    })
    this.checkCanPreview()
  },

  /**
   * 检查是否可以开始预览
   */
  checkCanPreview() {
    const canPreview = !!(this.data.carImageFile && this.data.selectedColorId)
    this.setData({ canPreview })
  },

  /**
   * 开始渲染
   */
  async startRender() {
    if (!this.data.canPreview || this.data.renderLoading) return
    
    this.setData({ renderLoading: true })
    
    try {
      // 1. 先上传车辆照片
      wx.showLoading({
        title: '上传照片中...',
        mask: true
      })
      
      const uploadRes = await api.warranty.uploadFile(this.data.carImageFile, 'COLOR_CHANGE')
      
      if (uploadRes.status !== 200 || !uploadRes.data) {
        throw new Error('照片上传失败')
      }
      
      const carImgUrl = uploadRes.data.filePath || uploadRes.data.fileUrl || uploadRes.data.fileName
      
      // 2. 提交渲染请求
      wx.showLoading({
        title: '开始渲染中...',
        mask: true
      })
      
      const renderParams = {
        carImgUrl: carImgUrl,
        colorCardId: this.data.selectedColorId
      }
      
      const renderRes = await api.colorChange.saveColorChange(renderParams)
      
      if (renderRes.status === 200 && renderRes.data) {
        // 渲染提交成功，等待结果
        this.pollRenderResult(renderRes.data.id)
      } else {
        throw new Error(renderRes.message || '渲染提交失败')
      }
      
    } catch (error) {
      console.error('渲染失败:', error)
      wx.hideLoading()
      wx.showToast({
        title: error.message || '渲染失败',
        icon: 'error',
        duration: 2000
      })
      this.setData({ renderLoading: false })
    }
  },

  /**
   * 轮询渲染结果
   */
  async pollRenderResult(renderId) {
    const maxAttempts = 30 // 最多轮询30次
    let attempts = 0
    
    const poll = async () => {
      attempts++
      
      try {
        // 获取渲染历史来检查状态
        const historyRes = await api.colorChange.getColorChangeHistory({ pageNo: 1 })
        
        if (historyRes.status === 200 && historyRes.data && historyRes.data.length > 0) {
          // 找到对应的渲染记录
          const renderRecord = historyRes.data.find(item => item.id === renderId)
          
          if (renderRecord) {
            if (renderRecord.status === 1) {
              // 渲染完成
              wx.hideLoading()
              this.setData({
                renderResult: renderRecord,
                renderLoading: false
              })
              
              wx.showToast({
                title: '渲染完成！',
                icon: 'success',
                duration: 2000
              })
              return
            } else if (renderRecord.status === 2) {
              // 渲染失败
              throw new Error('渲染失败，请重试')
            }
          }
        }
        
        // 如果还在渲染中，继续轮询
        if (attempts < maxAttempts) {
          setTimeout(poll, 2000) // 2秒后再次检查
        } else {
          throw new Error('渲染超时，请重试')
        }
        
      } catch (error) {
        wx.hideLoading()
        console.error('轮询渲染结果失败:', error)
        wx.showToast({
          title: error.message || '获取渲染结果失败',
          icon: 'error',
          duration: 2000
        })
        this.setData({ renderLoading: false })
      }
    }
    
    // 开始轮询
    poll()
  },

  /**
   * 导航到渲染历史页面
   */
  navigateToHistory() {
    wx.navigateTo({
      url: '/pages/color-change/history/index'
    })
  },

  /**
   * 页面分享
   */
  onShareAppMessage() {
    return {
      title: 'KSG汽车改色预览',
      path: '/pages/color-change/index',
      imageUrl: '/images/share-color-change.png'
    }
  },

  /**
   * 显示色卡选择弹窗
   */
  showColorModal() {
    console.log('显示色卡弹窗，当前色卡数量:', this.data.colorList.length);
    this.setData({
      showColorModal: true
    });
    
    // 如果还没有色卡数据，重新加载
    if (this.data.colorList.length === 0) {
      console.log('色卡数据为空，重新加载');
      this.setData({
        colorPageNo: 1,
        hasMoreColors: true
      });
      this.loadColorList();
    }
  },

  /**
   * 隐藏色卡选择弹窗
   */
  hideColorModal() {
    this.setData({
      showColorModal: false
    });
  },

  /**
   * 确认选择颜色
   */
  confirmColorSelection() {
    if (!this.data.selectedColorId) {
      wx.showToast({
        title: '请选择一种颜色',
        icon: 'none'
      });
      return;
    }
    
    this.hideColorModal();
    wx.showToast({
      title: '颜色选择成功',
      icon: 'success'
    });
  },

  /**
   * scroll-view滚动事件（用于调试）
   */
  onModalScroll(e) {
    const { scrollTop, scrollHeight, scrollWidth } = e.detail;
  },

  /**
   * scroll-view滚动到底部事件（专门的调试方法）
   */
  onScrollToLower(e) {
    console.log('🔥 滚动到底部！！！', {
      timestamp: new Date().getTime(),
      colorListLength: this.data.colorList.length,
      hasMoreColors: this.data.hasMoreColors,
      loadingColors: this.data.loadingColors
    });
    this.loadMoreColors();
  }
}) 